<template>
	<view class="container bar">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{data.title}}</block>
		</cu-custom>
		<view class="head bg-white">
			<view class="cover">
				<image :src="data.zhuan.imgUrl" mode="aspectFit"></image>
			</view>
			<view class="detail padding-sm margin-top-xs">
				<view class="title">
					<text class="text-xxl text-bold">{{data.zhuan.title}}</text>
				</view>
				<view class="sub-title padding-top-sm padding-bottom-xs">
					<text>{{data.zhuan.subtitle}}</text>
				</view>
				<view class="flex">
					<view class="flex-sub text-red">
						<text class="text-xxl" v-if="data.zhuan.price<=0">免费</text>
						<view v-else>
							<text>￥</text>
							<text class="text-xxl">{{data.zhuan.price}}</text>
						</view>
					</view>
					<view class="flex-sub text-right padding-top-sm">
						<text class="text-black padding-left-sm text-bold">{{data.zhuan.score==0?'暂无评':data.zhuan.score}}分</text>
						<text class="text-gray margin-left-sm">{{data.zhuan.people}}人已订购</text>
					</view>
				</view>
			</view>
		</view>
		<view class="margin-top-sm bg-white">
			<view class="content-nav nav">
				<view class="cu-item" :class="currentshow=='lesson'?'cur':''" @click="currentshow='lesson'">课程</view>
				<view class="cu-item" :class="currentshow=='content'?'cur':''" @click="currentshow='content'">简介</view>
			</view>
			<view class="content-tab">
				<view class="tab-item" :class="currentshow=='lesson'?'active':''">
					<lessons :lessons="data.lessons"></lessons>
				</view>
				<view class="tab-item" :class="currentshow=='content'?'active':''">
					<view class="rich-text padding">
						<view v-if="data.special.summary==''" class="text-empty">
							<text>啊噢~忘了写简介了哦~</text>
						</view>
						<rich-text :selectable="true" v-else :nodes="data.special.summary"></rich-text>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white tabbar shop">
			<view class="action" @click="doFavor('special',data.special.id)">
				<view :class="data.favor.id>0?'text-yellow':''">
					<view :class="'cuIcon-favor'+(data.favor.id>0?'fill':'')"></view> 收藏
				</view>
			</view>
			<button class="action text-muted" open-type="share" v-if="platform=='wxapp'">
				<view class="cuIcon-share"></view> 分享
			</button>
			<view class="action" @click="showshare=true" v-else>
				<view class="cuIcon-share"></view> 分享
			</view>
			<view class="btn-group">
				<button style="width: 100%;" @click="doplay" class="cu-btn bg-gradual-green round-topleft-none lg" v-if="data.hasbought">开始学习</button>
				<button style="width: 100%;" @click="dobuy" class="cu-btn bg-gradual-yellow round-topleft-none lg" v-else>订购专栏</button>
			</view>
		</view>
		<share :platform="platform" :shareinfo="shareinfo" @closeshare="showshare=false" :showshare="showshare"></share>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import core from "@/static/core.js"
	import lessons from "@/components/util/lessons.vue"
	import share from "@/components/util/share.vue"
	
	export default {
		components: {lessons, share},
		computed: mapState(['userId', 'hasLogin', 'userName', 'lectorid']),
		data() {
			return {
				sid:0,
				currentshow:'lesson',
				platform:'h5',
				showmodal:'',
				showshare:false,
				shareinfo:{
					url:'',
					providers:4,
					provider:{}
				},
				data:{
					"special": {
						"id": 0,
						"uniacid": 0,
						"uid": 0,
						"title": "",
						"subtitle": "",
						"cover": "",
						"summary": "",
						"price": 0.00,
						"views": 0,
						"collection": 0,
						"likes": 0,
						"score": 0.0,
						"evaluations": 0,
						"displayorder": 0,
						"viewsales":0,
						"status": 0,
						"dateline": 0,
						"addtime": 0,
						"datetime": "",
						"createtime": "",
						"url":""
					},
					"zhuan":{
						"id":0,
						"title":"",
						"subtitle":"",
						"imgUrl":"",
						"summary":"",
						"price":0,
						"status":0,
						"score":0.0,
						"people":0
					},
					"title": "专栏详情",
					"hasbought":true,
					"paylog":{
						id:0
					},
					"favor":{
						"id":0
					},
					"lessons": []
				}
			}
		},
		onLoad(options) {
			// if(typeof(options.id)=='undefined' || !options.id) return core.toast('参数错误：无效的编号','back');
			// this.sid = options.id;
			// this.platform = core.platform;
			// var that = this;
			// this.initData('special/detail',{id:this.sid},function(res){
			// 	let summary = res.special.subtitle=='' ? res.special.summary : res.special.subtitle;
			// 	that.shareinfo = core.initshare(res.special.title, res.special.url, res.special.cover, summary);
			// });
			var provider = options.id;
			this.doshare(provider)
		},
		onPullDownRefresh() {
			var that = this;
			this.initData('special/detail',{id:this.sid},function(res){
				let summary = res.special.subtitle=='' ? res.special.summary : res.special.subtitle;
				that.shareinfo = core.initshare(res.special.title, res.special.url, res.special.cover, summary);
			});
			uni.stopPullDownRefresh();
		},
		onShareAppMessage(e){
			return {
				title:this.data.title,
				path:core.page(this.shareinfo.url)
			}
		},
		methods:{
			initData(route, data={}, callback=false){
				var that = this;
				core.get(route,function(res){
					if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined'){
						return core.report(res, true);
					}
					that.data = res;
					uni.setNavigationBarTitle({
						title:res.title
					});
					//#ifndef APP-PLUS || APP-PLUS-NVUE || H5
					uni.showShareMenu({
						title : res.special.title,
						path : core.page('special/detail',{id:res.special.id})
					});
					// #endif
					if(callback){
						callback(res);
					}
				},data);
			},
			naviTo(page,data={}){
				return core.navito(page,data);
			},
			createOrder(){
				if(!this.hasLogin) return core.navito('auth/index',{act:'login'});
				core.post('special/buy',function(res){
					if(res.type!='success') return core.report(res);
					core.navito('order/create',{tid:res.message.tid});
				},{id:this.sid});
			},
			docopy(text){
				return core.copy(text);
			},
			async doshare(provider){
				// if(provider=='') return false;
				// let scene = provider=='wxtimeline' ? 'WXSenceTimeline' : 'WXSceneSession';
				// let _provider = provider=='wxtimeline'?'weixin':provider;
				// let sharetype = provider == 'qq' ? 1 : 0;
				let that = this;
				// let summary = this.shareinfo.summary;
				// if(provider == 'qq') summary = this.shareinfo.title + ':' + summary + ' 详情请戳：'+ this.shareinfo.url;
				// uni.share({
				//     provider: _provider,
				//     scene: scene,
				//     type: sharetype,
				// 	title:this.shareinfo.title,
				// 	imageUrl:this.shareinfo.cover,
				// 	href:this.shareinfo.url,
				//     summary: summary,
				//     success: function (res) {
				// 		core.toast('分享成功！','','success');
				// 		that.showmodal = '';
				//     },
				//     fail: function (err) {
				//         console.log("fail:" + JSON.stringify(err));
				// 		core.toast('分享失败');
				//     }
				// });
				that.data.zhuan=(await this.$api.reqGet({
				url:"column/selById/"+provider,
				})).data[0];
				if(that.data.zhuan.classroomCourses!=null){
					this.data.lessons=that.data.zhuan.classroomCourses
				}
				console.log(that.data.zhuan)
			},
			dobuy(){
				if(this.data.paylog.id>0){
					core.navito('order/create',{tid:this.data.paylog.tid});
				}else{
					this.createOrder();
				}
			},
			doplay(){
				if(!this.hasLogin) return core.navito('auth/index',{act:'login'});
				if(this.data.lessons.length==0) return core.toast('该专栏暂无课程');
				let lessonid = this.data.lessons[0].id;
				return core.navito('lesson/detail', {id:lessonid});
			},
			doFavor(Type='lesson',id=0){
				if(!this.hasLogin) return core.navito('auth/index',{act:'login'});
				var action = Type+'/favor';
				var that = this;
				return core.get(action,function(res){
					if(res.type!='success') return core.report(res);
					that.data.favor = res.message;
				},{id:id})
			},
			unSupport(){
				return core.toast('敬请期待');
			}
		}
	}
</script>

<style>
	page{background: #FFFFFF;}
	.container{background: #F2F2F2;}
	.rich-text{line-height: 46upx; font-size: 28upx; letter-spacing: 1upx; color: #666666; font-family:PingFangSC-Regular,PingFang SC;}
</style>
